<template>
  <view class="guide-container">
    <swiper 
      class="guide-swiper" 
      :current="currentIndex"
      :indicator-dots="true" 
      :autoplay="false" 
      :circular="false"
      indicator-color="rgba(255,255,255,0.3)"
      indicator-active-color="#667eea"
      @change="onSwiperChange"
    >
      <!-- 引导页1：专业的在线问诊 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-image">
            <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2851687453,1914451115&fm=26&gp=0.jpg" mode="aspectFit"></image>
          </view>
          <view class="guide-content">
            <text class="guide-title">专业的在线问诊</text>
            <text class="guide-desc">7×24小时在线医生服务\n随时随地获得专业医疗咨询</text>
          </view>
        </view>
      </swiper-item>
      
      <!-- 引导页2：丰富的健康常识 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-image">
            <image src="https://img.icons8.com/color/200/health-book.png" mode="aspectFit"></image>
          </view>
          <view class="guide-content">
            <text class="guide-title">丰富的健康常识</text>
            <text class="guide-desc">海量权威医疗知识库\n提升您的健康素养</text>
          </view>
        </view>
      </swiper-item>
      
      <!-- 引导页3：打造你的健康常青树 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-image">
            <image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3089877631,1445375051&fm=26&gp=0.jpg" mode="aspectFit"></image>
          </view>
          <view class="guide-content">
            <text class="guide-title">打造你的健康常青树</text>
            <text class="guide-desc">个性化健康管理方案\n让健康伴随您一生</text>
          </view>
        </view>
      </swiper-item>
      
      <!-- 引导页4：智能健康监测 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-image">
            <image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1234567890,987654321&fm=26&gp=0.jpg" mode="aspectFit"></image>
          </view>
          <view class="guide-content">
            <text class="guide-title">智能健康监测</text>
            <text class="guide-desc">实时监测健康数据\n预防胜于治疗</text>
          </view>
        </view>
      </swiper-item>
      
      <!-- 引导页5：便捷的医疗服务 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-image">
            <image src="https://img.icons8.com/color/200/medical-mobile-app.png" mode="aspectFit"></image>
          </view>
          <view class="guide-content">
            <text class="guide-title">便捷的医疗服务</text>
            <text class="guide-desc">一站式医疗健康服务\n让看病变得简单高效</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    
    <!-- 底部按钮 -->
    <view class="guide-footer">
      <button v-if="currentIndex < 4" @click="nextStep" class="next-btn">下一步</button>
      <button v-else @click="startApp" class="start-btn">立即体验</button>
      <text v-if="currentIndex < 4" @click="skipGuide" class="skip-text">跳过</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current
    },
    nextStep() {
      if (this.currentIndex < 4) {
        this.currentIndex++
      }
    },
    skipGuide() {
      this.startApp()
    },
    startApp() {
      // 测试阶段：不存储引导状态，每次登录都走引导
      // 正式上线后可以取消注释下面这行来记录用户已完成引导
      // uni.setStorageSync('hasSeenGuide', true)
      
      // 跳转到首页
      this.$tab.reLaunch('/pages/index')
    }
  }
}
</script>

<style lang="scss" scoped>
.guide-container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.guide-swiper {
  height: calc(100vh - 200rpx);
}

.guide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 60rpx;
  text-align: center;
}

.guide-image {
  margin-bottom: 80rpx;
  
  image {
    width: 400rpx;
    height: 400rpx;
  }
}

.guide-content {
  .guide-title {
    display: block;
    font-size: 48rpx;
    font-weight: 600;
    color: #fff;
    margin-bottom: 40rpx;
  }
  
  .guide-desc {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
  }
}

.guide-footer {
  position: absolute;
  bottom: 80rpx;
  left: 60rpx;
  right: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.next-btn, .start-btn {
  width: 100%;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 44rpx;
  border: none;
  font-size: 32rpx;
  color: #667eea;
  font-weight: 600;
  margin-bottom: 30rpx;
}

.skip-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
}
</style>